<template>
  <div>
    <p class="valueStyle">综合热榜</p>
    <ul>
      <li v-for="(item,index) in  msg" :key="index">
        <a :href="item.url"  target="_blank" >
          <span>{{item.name}}</span>
          <span :style="`color:${color(index)}`">{{item.strnum}}</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    msg: Array
  },
  methods: {
    color(num){
      if(num < 10){
        return `rgba(255,152,18,${Math.abs(num-10)/20+0.5})`
      }else{
        return `rgba(145,149,163,${Math.abs(this.msg.length - num)/this.msg.length+0.3})`
      }
    }
  },
}
</script>
<style scoped>
ul,
li{
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}
a{
  display: inline-flex;
  min-width: 3.5rem;
  color: #2c3e50;
  text-decoration: none;
  margin: 0.05rem auto;
  text-align: left;
  letter-spacing: 0.01rem;
  justify-content: space-between;
}
a:hover{
  color:rgba(160,179,232,0.9) ;
}
.valueStyle{
    font-weight:600;
    font-size:0.25rem;
    margin:0.05rem 0;
    cursor:pointer;
    background-image:-webkit-linear-gradient(bottom,red,#ff5f60,#f0c41b); 
    background-clip:text; 
    -webkit-text-fill-color:transparent; 
}
a>span:last-child{
  font-size: 0.13rem;
}
</style>
